<template>
  <div
    ref="elementRef"
    :class="clsx('c-select-dropdown', 'c-popper', hidden ? 'hidden' : '')"
    :style="{ width, [placement]: space, left: '0px' }"
  >
    <div class="c-scrollbar">
      <div class="c-select-dropdown__wrap c-scrollbar__wrap">
        <ul class="c-scrollbar__view c-select-dropdown__list">
          <li
            v-for="item in dropList"
            :key="`drop${item.value}`"
            @click="clickItem(item)"
            :class="
              clsx(
                'c-select-dropdown__item',
                defaultValue === item.value ? 'selected' : '',
                defaultValue === item.value ? 'hover' : '',
              )
            "
          >
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import clsx from 'clsx'
export default {
  props: {
    width: {
      type: String,
      default: '100%',
    },
    dropList: {
      type: Array,
      default: () => [],
    },
    changeValue: {
      type: Function,
      default: () => null,
    },
    space: {
      type: String,
      default: '34px',
    },
    defaultValue: {
      type: [String,Number],
      default: '',
    },
    onClose: {
      type: Function,
      default: () => {},
    },
    initChange: {
      type: Function,
      default: () => {},
    },
    hidden: {
      type: Boolean,
      default:true,
    },
  },
  model:{
    prop: 'hidden',
    event: 'change'
  },
  data() {
    return {
      clsx,
      placement: 'top',
    }
  },
  methods:{
    clickItem(item) {
        console.log(item,'ss')
      this.$emit('changeValue',item)
      this.$emit('change',true)
    },
  }
}
</script>
<style>
    @import './drop.css';
</style>
